<!DOCTYPE html>
<html>
    <head>
        <title>响应式布局</title>
        <style>
            body {
                margin: 20px;
                padding: 0;
            }
            .wrapper {
                max-width: 900px;
                margin: 2em auto;
            }
            .col1, .col2 {
                background-color: lightblue;
            }

            h1.calcs {
                /* 至少1.5rem */
                font-size: calc(1.5rem + 5vw);
            }
            h1 {
                font-size: 5vw;
            }

            /* 当屏幕像素 */
            @media screen and (min-width: 600px) {
                .col1 {
                    float: left;
                    width: 31%;
                }
                .col2 {
                    float: right;
                    width: 60%;
                }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
          <div class="col1">
            <p>
              This layout is responsive. See what happens if you make the browser
              window wider or narrow.
            </p>
          </div>
          <div class="col2">
            <p>
              One November night in the year 1782, so the story runs, two brothers
              sat over their winter fire in the little French town of Annonay,
              watching the grey smoke-wreaths from the hearth curl up the wide
              chimney. Their names were Stephen and Joseph Montgolfier, they were
              papermakers by trade, and were noted as possessing thoughtful minds
              and a deep interest in all scientific knowledge and new discovery.
            </p>
            <p>
              Before that night—a memorable night, as it was to prove—hundreds of
              millions of people had watched the rising smoke-wreaths of their fires
              without drawing any special inspiration from the fact.”
            </p>
          </div>
        </div>

        <h1 class="calcs">Test calc VW</h1>
        <h1 class="calcs">Test VW</h1>
      </body>
</html>